<!--变更日志-->
<template>
  <div class="log-change">
    <DicTable
      height="100%"
      stripe
      highlight-current-row
      highlight-hover-row
      max-height="600"
      ref="GBLtable"
      border
      header-row-class-name="header-row-class"
      row-class-name="ne-row-class"
      :columnData="GBLtbs.tableColumns"
      :tableData="GBLtbs.tableData"
      :loading="GBLtbs.tableLoading"
      :currentPage="~~GBLtbs.tablePage.pageIndex"
      :pageSize="~~GBLtbs.tablePage.pageSize"
      :totalResult="~~GBLtbs.tablePage.rowCount"
      :pager="true"
      @on-page-change="handlePageChange"
    >
      <template #opt="{ row }">
        <el-button @click="getDetail(row,true)">详细变更日志</el-button>
      </template>
    </DicTable>
    <el-dialog title="变更日志" :visible.sync="dialogTableVisible"  :append-to-body="true">
      <DicTable
          height="100%"
          stripe
          highlight-current-row
          highlight-hover-row
          max-height="600"
          ref="DETtbs"
          border
          header-row-class-name="header-row-class"
          row-class-name="ne-row-class"
          :columnData="DETtbs.tableColumns"
          :tableData="DETtbs.tableData"
          :currentPage="Number(DETtbs.tablePage.pageIndex)"
          :pageSize="Number(DETtbs.tablePage.pageSize)"
          :totalResult="Number(DETtbs.tablePage.rowCount)"
          :pager="true"
          @on-page-change="handlePageChanger"
      >
      </DicTable>
    </el-dialog>
  </div>
</template>
<script>
import DicTable from "@/components/public/DicTable";
import CustOrderService from "@/api/order/CustOrderService";
import { mapState } from "vuex";
export default {
  components: { DicTable },
  name: "LogChange",
  setup() {},
  data() {
    return {
      GBLtbs: {
        tableColumns: [
          { field: "rowId", title: "序号", width: "5%" },
          { field: "modComment", title: "原因" },
          { field: "updateDate", title: "修改日期" },
          { field: "createStaffName", title: "修改人" },
          { field: "custSoNumber", title: "新流水号" },
          { field: "modOldOrderNbr", title: "原流水号" },
          { field: "serviceOfferName", title: "登记事项" },
          { slotName: "opt", title: "变更日志" },
        ],
        tableData: [],
        tableLoading: false,
        tablePage: {
          pageIndex: 1,
          pageSize: 10,
          rowCount: 0,
        },
      },
      dialogTableVisible: false,
      DETtbs: {
        tableColumns: [
          { field: "ATTR_NAME_ALL", title: "属性名称" },
          { field: "attrValueNew", title: "新属性值" },
          { field: "attrValueOld", title: "原属性值" }
        ],
        tableData: [],
        tablePage: {
          pageIndex: 1,
          pageSize: 10,
          rowCount: 0,
        },
        row:{},
      },
    }
  },
  props: {
    CTOInfo: {
      type: Object,
    },
  },
  mounted() {},
  created() {
    this.getList();
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  methods: {
    async getList() {
      let{custSoNumber,custId,offerInstId} = this.CTOInfo,
      pageInfo = {
          pageIndex: ~~this.GBLtbs.tablePage.pageIndex + "",
          pageSize: ~~this.GBLtbs.tablePage.pageSize + "",
        },
      params = {custSoNumber,custId,offerInstId,modTypeFlag: "2",pageInfo: pageInfo};
      const result = await CustOrderService.qryOrderItemModifyList(params);
      if (result.meta.resultCode == "0" || !result.meta.resultCode) {
        this.GBLtbs.tableData = result.meta.qryOrderItemModifyList;
        this.GBLtbs.tablePage = {
          pageIndex: ~~Number(result.meta.pageInfo.pageIndex),
          pageSize: ~~Number(result.meta.pageInfo.pageSize),
          rowCount: ~~Number(result.meta.pageInfo.rowCount),
        };
      } else {
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: "error",
        });
      }
    },
    async getDetail(row,n) {
      this.row = row;
      this.dialogTableVisible = true;
      if(n){
        this.DETtbs.tablePage.pageIndex = 1;
        this.DETtbs.tablePage.pageSize = 10;
      }
      let pageInfo = {
          pageIndex: this.DETtbs.tablePage.pageIndex + "",
          pageSize: this.DETtbs.tablePage.pageSize + "",
      },
      params = { modId:this.row.modId,custId:this.row.custId, modTypeFlag: "2",orderItemId:this.row.orderItemId,
        prodId:this.CTOInfo.prodId,serviceOfferId:this.row.serviceOfferId,modType: this.row.custOrderType,pageInfo
      };
      const result = await CustOrderService.qryOrderItemAttrModifyList(params);
      if (result.meta.resultCode == "0" || !result.meta.resultCode) {
        this.DETtbs.tableData = result.meta.orderModifyLogs;
        this.DETtbs.tablePage.rowCount = Number(result.meta.pageInfo.rowCount)
        // this.DETtbs.tablePage = {
        //   pageIndex: Number(result.meta.pageInfo.pageIndex),
        //   pageSize: Number(result.meta.pageInfo.pageSize),
        //   rowCount: Number(result.meta.pageInfo.rowCount),
        // };
      } else {
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: "error",
        });
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.GBLtbs.tablePage.pageIndex = currentPage;
      this.GBLtbs.tablePage.pageSize = pageSize;
      this.getList();
    },
    handlePageChanger({ currentPage, pageSize }) {
      this.DETtbs.tablePage.pageIndex = currentPage;
      this.DETtbs.tablePage.pageSize = pageSize;
      this.getDetail(this.row,false);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
